
<template>
  <div>
  <!-- <el-button @click="resetDateFilter">清除日期过滤器</el-button>
  <el-button @click="clearFilter">清除所有过滤器</el-button> -->
  <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="created_time"
        label="创建日期"
        sortable
        width="180"
        column-key="created_time"
        :filters="[{text: '2018', value: '2018'}, {text: '2019', value: '2019'}, {text: '2020', value: '2020'}, {text: '2023', value: '2023'}]"
        :filter-method="filterHandler"

    >
    </el-table-column>
    <el-table-column
        prop="artificial_person"
        label="姓名"
        column-key="artificial_person"
        width="180">

    </el-table-column>
    <el-table-column
        prop="store_name"
        label="商店名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="county_id"
        label="城市代号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="cust_id"
        label="客户代号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="licence_no"
        label="身份代号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="market_id"
        label="商店代号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="periods"
        label="阶段"
        width="180">
    </el-table-column>
    <el-table-column
        prop="sale"
        label="销量"
        width="180">
    </el-table-column>
<!--    <el-table-column-->
<!--        prop="address"-->
<!--        label="地址"-->
<!--        width="180"-->
<!--        :formatter="formatter">-->
<!--    </el-table-column>-->
    <el-table-column
        prop="tag"
        label="标签"
        width="100"
        :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.tag === '家' ? 'primary' : 'success'"
            disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  
  data() {
    return {
      data:[
  {
    "cust_id": "421081108943",
    "licence_no": "421081108943",
    "store_name": "石首市海之缘便利店",
    "county_id": "11421008",
    "market_id": "11421008017",
    "artificial_person": "万敏",
    "created_time": "2023/8/11 09:12:06",
    "periods": "7:1"
  },
  {
    "cust_id": "421023112313",
    "licence_no": "421023112313",
    "store_name": "娜家便利店",
    "county_id": "11421004",
    "market_id": "11421004008",
    "artificial_person": "伍新光",
    "created_time": "10/4/2020 16:16:24",
    "periods": "7:5"
  },
  {
    "cust_id": "421023112084",
    "licence_no": "421023112084",
    "store_name": "无",
    "county_id": "11421004",
    "market_id": "11421004025",
    "artificial_person": "王汝琴",
    "created_time": "19/9/2019 10:54:07",
    "periods": "7:4"
  },
  {
    "cust_id": "421023111766",
    "licence_no": "421023111766",
    "store_name": "交通便利店",
    "county_id": "11421004",
    "market_id": "11421004026",
    "artificial_person": "陈永涛",
    "created_time": "11/12/2018 12:03:21",
    "periods": "7:1"
  },
  {
    "cust_id": "421023111813",
    "licence_no": "421023111813",
    "store_name": "无",
    "county_id": "11421004",
    "market_id": "11421004025",
    "artificial_person": "胡超金",
    "created_time": "25/12/2018 16:51:15",
    "periods": "7:4"
  }
],
      tableData: [],
    };
  },
  methods: {
    //创建Date对象
      convertDate(dateString) {
        if (typeof dateString !== 'string' || !dateString) {
        console.error('Invalid date string');
        return null; // 或者抛出一个错误，或者返回一个默认值
  }

      // 分割字符串以获取日期和时间的各个部分
      const parts =dateString.toString.split(/[/: ]/);
      // 重新组合为 ISO 8601 格式的日期字符串
      const isoDate = `${parts[2]}-${String(parts[1]).padStart(2, '0')}-${String(parts[0]).padStart(2, '0')}T${parts[3]}:${parts[4]}:${parts[5]}`;
      // 创建 Date 对象
      return new Date(isoDate);
    },
    //清除日期筛选器
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    //访问每一行数据的address
    formatter(row) {
      return row.address;
    },
    //检查row.tag是否等于value是返回1
    filterTag(value, row) {
      return row.tag === value;
    },
       filterHandler(value, row, column) {
      const property = column['property'];
      const dateStr = row[property];
      const date = moment(dateStr, "DD/MM/YYYY HH:mm:ss");
      if (!date.isValid()) {
        console.error('Invalid date:', dateStr);
        return false;
      }
      console.log(date.year())
      const year = date.year().toString();
      return year === value;
    }
  },
  mounted() {
    this.tableData = this.data;
    console.log(this.tableData)
  }
}
</script>

<style scoped>
/* 根据需要添加样式 */
</style>